<template>
     <div id="rollsale1">
          <div class="rollflex">
               <ul>
                   <li v-for="(i,index) in imgarr1" :key="index">
                       <img :src="i" >
                   </li>
               </ul>
          </div>
          <div class="rollsale1_1"></div>
     </div>
</template>
<script>
export default {
    data() {
        return {
             imgarr1:['../../../../static/rollImg/rollimg1/53f8a6.jpg',
             '../../../../static/rollImg/rollimg1/6934d48.jpg',
             '../../../../static/rollImg/rollimg1/a73d53d45.jpg',
             '../../../../static/rollImg/rollimg1/02bb294c2c8.jpg']
        }
    }
}
</script>

<style>
 #rollsale1{
   width: 100%;
   height: 1800px;
 }
   .rollsale1_1{
       margin: 0 auto;
       width: 80%;
       height: 1200px;
       background-image: url(../../../../static/rollImg/rollimg1/a857a278d747466ed908f94a2df67ca6800a3935.png);
       background-position: center;
       background-size: cover;
       display: flex;
       justify-content: center;
       flex-direction: column;
   }
   .rollflex{
       margin-top: 30px;
       width: 100%;
       height: 250px;
       display: flex;
       justify-content: center;  
   }
   .rollflex ul{
         width: 1000px;
         height: 220px;
         display: flex;
         justify-content: center;
         align-items: center;
         overflow: hidden;
   }
   .rollflex ul li{
       flex: 1;
       width: 250px;
       height: 220px;
       box-shadow: 0 0 20px #9e9e9e;
   }
   .rollflex ul li img{
       width: 100%;
       height: 100%;
   }
</style>


